<!-- Button to trigger modal -->
<!-- Modal -->

<div id="AddEvents">
  <div>
    <div>

      <div class="modal-header">
        <%= render partial: 'help/help_event_new' %>
        <h4 id="AddCategoryLabel"><%= t('event.main_title')%></h4>
      </div>
      
      <div class="modal-body" style="overflow:hidden;">
        <%#= form_for Event.new(:owner_id => Actor.normalize_id(current_user)) do |f| %>
        <%= form_for Event.new(:owner_id => profile_or_current_subject.actor_id, :interval => 1) do |f| %>
     
          <%= f.hidden_field :owner_id  %>
          <%= f.hidden_field :start_at %>
          <%= f.hidden_field :end_at %>
          <%= f.hidden_field :all_day %>
          <!--TITULO-->
          <label><%= t('event.leyend.title')%></label>
          <%= f.text_field :title, :class => "form-control", :placeholder => t('event.title_input') %>
          
          <!--DESCRIPCION-->
          <label><%= t('event.leyend.description')%></label>
          <%= f.text_area :description, :class => "form-control", :rows => 4, :placeholder => t('event.description_input') %>
          
          <!--TYPE-->
          <label><%= t('event.leyend.type')%></label>
            <div class="checkbox">
             <label>
               <%= f.radio_button :streaming, false, checked: true %> <span class="lbl padding-0"> <%= t('event.type.videoconference') %> </span>
             </label>
             <label>
                <%= f.radio_button :streaming, true %> <span class="lbl padding-0"> <%= t('event.type.streaming') %> </span>
             </label>
            </div>

          <!--EMBED-->
          <label><%= t('document.options.embed')%></label>
          <%= f.text_area :embed, :class => "form-control", :rows => 5, :placeholder => t('embed.input'), :disabled => true %>
          

          <script type="text/javascript">
            $("#event_streaming_false").on("click", function() {
              $("#event_embed").attr("disabled", true);
            });
            $("#event_streaming_true").on("click", function() {
              $("#event_embed").attr("disabled", false);
            });
            $(document).ready(function(){
              if ($("#event_streaming_true").is(':checked')) {
                $("#event_embed").attr("disabled", false);
              }
            });
          </script>


          <!--DATE-->
          <label><%= t('event.leyend.fecha')%></label>
          <div id="date" class="input-group">
            <input class="form-control" data-format="yyyy-MM-dd" type="text" name="event_day">
            <span class="input-group-addon">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-calendar" ></i>
            </span>
          </div>
          <!--HORA INICIO-->
          <label><%= t('event.leyend.Hora de Inicio')%></label>
          <div id="hourinit" class="input-group">
            <input class="form-control" data-format="hh:mm:ss" type="text" name="event_start_time">
            <span class="input-group-addon">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-clock-o"></i>
            </span>
          </div>
          <!--HORA FINALIZACION-->
          <label><%= t('event.leyend.Hora de Finalizacion')%></label>
          <div id="hourfinish" class="input-group">
            <input class="form-control" data-format="hh:mm:ss" type="text" name="event_end_time">
            <span class="input-group-addon">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-clock-o"></i>
            </span>
          </div>

          <script type="text/javascript">
            $(function() {
              $('#hourinit').datetimepicker({
                pickDate: false
              });
            });
            $(function() {
              $('#hourfinish').datetimepicker({
                pickDate: false
              });
            });
            $(function() {
              $('#date').datetimepicker({
                pickTime: false
              });
            });
          </script>

          <script>
            $(document).ready(function(){
              var saveEventButton = $("#AddEvents input[type='submit']");
              var eventButton = $("#AddEvents input[value=<%= t('categories.save')%>][type='button'][class='btn-primary']");
              $(eventButton).click(function(event) {
                if ($("#AddEvents input[name='event[title]']").val() == "") {
                  $("#AddEvents .errors").remove();
                  $("#AddEvents .new_event").after("<div class='errors'><%= t('event.title_input')%></div>");
                } else {
                  // $("#AddEvents input[name='event[start_at]']").val($("#AddEvents input[name='event_day']").val() + " " + $("#AddEvents input[name='event_start_time']").val());
                  $("#AddEvents input[name='event[start_at]']").val(new Date(Date.parse($("#AddEvents input[name='event_day']").val().replace(/-/g,"/") + " " + $("#AddEvents input[name='event_start_time']").val())));
                  
                  if ($("#AddEvents input[name='event_end_time']").val() < $("#AddEvents input[name='event_start_time']").val()) {
                    var d = new Date($("#AddEvents input[name='event_day']").val());
                    d.setDate(d.getDate()+1);
                    // $("#AddEvents input[name='event[end_at]']").val(d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + $("#AddEvents input[name='event_end_time']").val());
                    $("#AddEvents input[name='event[end_at]']").val(new Date(Date.parse(d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate() + " " + $("#AddEvents input[name='event_end_time']").val())).toUTCString());
                  } else {
                  // $("#AddEvents input[name='event[end_at]']").val($("#AddEvents input[name='event_day']").val() + " " + $("#AddEvents input[name='event_end_time']").val());
                  $("#AddEvents input[name='event[end_at]']").val(new Date(Date.parse($("#AddEvents input[name='event_day']").val().replace(/-/g,"/") + " " + $("#AddEvents input[name='event_end_time']").val())).toUTCString());
                  }
                  $(saveEventButton).click();
                }
              });
            });

          </script>
        <%= f.submit t('categories.save'), :id => "saveEvent", :class => "hidden" %>
        <% end %>
      </div><!-- /BODY-->
      
      <div class="modal-footer">
        <input type="button" class="btn btn-primary" value="<%= t('categories.save')%>"/>
      </div><!-- /FOOTER -->
    </div><!-- /MODAL-CONTENT -->
  </div><!-- /MODAL-DIALOG -->
</div><!-- /MODAL -->
